<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#FFFFFF" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #333333;font-size: 30rpx;">设置</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="form_div">
				<form @submit="loginNow" class="grace-form">
					<view class="grace-form-item" style="background-color: #FFFFFF;padding: 0 20rpx;">
						<text class="grace-form-label" style="color: #333333;">新昵称<text style="color: #EB5D4B;">*</text></text>
						<view class="grace-form-body"><input v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入新昵称" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item" style="padding: 0 20rpx;">
						<text class="grace-form-label" style="color: #666666;width: 400rpx;">限2～12个中英文或数字。</text>
					</view>
				</form>
			</view>
			<view class="out-btn" @click="submit">保存</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
export default {
	data() {
		return {
			phoneno:"",
			val:false
		};
	},
	methods: {
		goback: function() {
			uni.navigateBack({});
		},
		clearInput: function() {
			this.phoneno = '';
		},
		submit(){
			this.gRequest.post('/login/changenickname', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
				nickname:this.phoneno
			},"form",{}, res => {
				if(res.status==1) {
					uni.showToast({ title: "设置成功", icon: 'none' });
				}
			});
		},
	},
	components: {
		gracePage,
		graceHeader,
		graceCheckBtn
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #f4f4f4;
}
.grace-body {
	padding: 0;
	margin-top: 120rpx;
	width: 750rpx;
}
.grace-form-input {
	text-align: left;
}

.out-btn {
	width:620rpx;
	height:94rpx;
	margin-top:100rpx ;
	background:#EB5D4B;
	border-radius:47rpx;
	text-align: center;
	line-height: 94rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 60rpx;
	margin-bottom: 40rpx;
}
</style>
